<template>
    <el-form>
        <div class="boxcheck">
            <el-checkbox v-model="checkcitiesAll" :indeterminate="isIndeterminate" @change="handleCheckAllChange('cities')">
                客户管理
            </el-checkbox>
            <el-checkbox-group v-model="checkedCities" @change="handleCheckedChange('cities')">
                <el-checkbox v-for="city in cities" :key="city" :label="city">{{ city }}</el-checkbox>
            </el-checkbox-group>
        </div>
        <div class="boxcheck">
            <el-checkbox v-model="checkschoolsAll" :indeterminate="isIndeterminate"
                @change="handleCheckAllChange('schools')">
                合同管理
            </el-checkbox>
            <el-checkbox-group v-model="checkedSchools" @change="handleCheckedChange('schools')">
                <el-checkbox v-for="school in schools" :key="school" :label="school">{{ school }}</el-checkbox>
            </el-checkbox-group>
        </div>
        <div class="boxcheck">
            <el-checkbox v-model="checkpositionsAll" :indeterminate="isIndeterminate"
                @change="handleCheckAllChange('positions')">
                系统中心
            </el-checkbox>
            <el-checkbox-group v-model="checkedPositions" @change="handleCheckedChange('positions')">
                <el-checkbox v-for="position in positions" :key="position" :label="position">{{ position
                }}</el-checkbox>
            </el-checkbox-group>
        </div>
        <div class="boxcheck">
            <div class="btn">
                <el-button @click="checkedHandler" :loading="loading">保存</el-button>
            </div>
        </div>
    </el-form>
</template>

<script lang="ts" setup>
import { onMounted, type Ref, ref, watch } from 'vue';
import { userSystemSaveApi } from '@/services/system'
import { successMessage } from '@/utils/Tools/successMessage';
import { errorMessage } from '@/utils/Tools/errorMessage';
const checkcitiesAll = ref(false);
const checkschoolsAll = ref(false);
const checkpositionsAll = ref(false);
const isIndeterminate = ref(false);
const checkedCities = ref<string[]>([]);
const checkedSchools = ref<string[]>([]);
const checkedPositions = ref<string[]>([]);
const loading = ref(false);
interface IProps {
    permissionArray: ISystemData.PermissionData
}

const props = defineProps<IProps>()
const cities = ref<string[]>([]);
const schools = ref<string[]>([]);
const positions = ref<string[]>([]);
watch(props, value => {
    cities.value = props.permissionArray.cities;
    schools.value = props.permissionArray.schools;
    positions.value = props.permissionArray.positions;
})
const handleCheckAllChange = (type: string) => {
    switch (type) {
        case 'cities':
            checkedCities.value = checkcitiesAll.value ? [...cities.value] : [];
            break;
        case 'schools':
            checkedSchools.value = checkschoolsAll.value ? [...schools.value] : [];
            break;
        case 'positions':
            checkedPositions.value = checkpositionsAll.value ? [...positions.value] : [];
            break;
    }
    isIndeterminate.value = false;
};

const handleCheckedChange = (type: string) => {
    switch (type) {
        case 'cities':
            checkAllItem(checkcitiesAll, type)
            break;
        case 'schools':
            checkAllItem(checkpositionsAll, type)
            break;
        case 'positions':
            checkAllItem(checkpositionsAll, type)
            break;
    }
};
const checkAllItem = (checkAll: any, type: string) => {
    const checkedArray = type === 'cities' ? checkedCities : (type === 'schools' ? checkedSchools : checkedPositions);
    const dataArray = type === 'cities' ? cities : (type === 'schools' ? schools : positions);
    const checkedCount = checkedArray.value.length;
    checkAll.value = checkedCount === dataArray.value.length;
    isIndeterminate.value = checkedCount > 0 && checkedCount < type.length;
}
const checkedHandler = async () => {
    const selectedData = {
        cities: checkedCities.value,
        schools: checkedSchools.value,
        positions: checkedPositions.value,
    };
    try {
        let ret = await userSystemSaveApi(selectedData)

        if (ret.code === 200) {
            successMessage('权限用户成功', () => {
                loading.value = true
            }, 1000)
        } else {
            errorMessage('添加权限异常，请重新提交', () => {
                loading.value = false
            }, 3000)
        }
    } catch (error) {
        errorMessage('网络异常重新加载', () => {
            loading.value = false
        }, 3000)
    }

};
</script>

<style lang="scss" scoped>
.boxcheck {
    margin: 20px;

    >.el-checkbox {
        width: 99%;
        border: 1px solid red;
    }

    .el-checkbox-group {
        width: 99%;
        border: 1px solid blue;
        border-top: 0;
        display: flex;
        justify-content: start;
        align-items: center;
        flex-wrap: wrap;

        .el-checkbox {
            width: 15%;
        }
    }

    div {
        width: 100%;

        .el-button {
            width: 200px;
            display: flex;
            justify-content: center;
            background-color: aqua;
            margin: 0 auto;
        }
    }
}
</style>
